<template>
    <div class="app-container">
        <div class="Search">
            <!--工具条-->
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="query">


                    <el-form-item v-has="'PLATFROM_TENANT_QUERY'">
                        <el-cascader ref="tenantTree" placeholder="所属租户" :props="tenantProps" :options="tenantOptions"
                            @change="selectTenant" clearable collapse-tags filterable></el-cascader>
                    </el-form-item>

                    <el-form-item>
                        <el-cascader ref="organTree" placeholder="所属组织" :props="props" :options="organOptions"
                            @change="selectOrgan" collapse-tags clearable filterable></el-cascader>
                    </el-form-item>

                    <el-form-item>
                        <el-select v-model="query.params.orderStatus" placeholder="订单状态">
                            <el-option v-for="item in query.orderStatusOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="query.params.payType" placeholder="支付类型">
                            <el-option v-for="item in query.orderPayTypeOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.ext" placeholder="拓展字段" />
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="query.params.amount" placeholder="订单金额">
                            <el-option v-for="item in query.options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.finishedTimeStart" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd 00:00:00" type="date" placeholder="订单完成时间起">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.finishedTimeEnd" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd 00:00:00" type="date" placeholder="订单完成时间止">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.createTimeStart" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd 00:00:00" type="date" placeholder="订单生成时间起">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.createTimeEnd" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd 00:00:00" type="date" placeholder="订单生成时间止">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.closeTimeStart" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd 00:00:00" type="date" placeholder="订单关闭时间起">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.closeTimeEnd" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd 00:00:00" type="date" placeholder="订单关闭时间止">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="query.params.thirdPartId" placeholder="消费者第三方标识" />
                    </el-form-item>

                    <el-form-item>
                        <el-date-picker v-model="query.params.createDateStart" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd 00:00:00" type="date" placeholder="生成日期起">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="query.params.createDateEnd" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd 00:00:00" type="date" placeholder="生成日期止">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </div>

        <div class="block">
            <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
                <el-table-column align="center" label="序号" width="95">
                    <template slot-scope="scope">
                        {{ scope.$index }}
                    </template>
                </el-table-column>

                <el-table-column label="主键" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.id }}
                    </template>
                </el-table-column>
                <el-table-column label="所属组织" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.organId }}
                    </template>
                </el-table-column>
                <el-table-column label="组织路径" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.organPath }}
                    </template>
                </el-table-column>
                <el-table-column label="删除标识" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.isDeleted }}
                    </template>
                </el-table-column>
                <el-table-column label="订单状态" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.orderStatus }}
                    </template>
                </el-table-column>
                <el-table-column label="支付类型" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.payType }}
                    </template>
                </el-table-column>
                <el-table-column label="拓展字段" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.ext }}
                    </template>
                </el-table-column>
                <el-table-column label="订单金额" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.amount }}
                    </template>
                </el-table-column>
                <el-table-column label="订单完成时间" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.finishedTime }}
                    </template>
                </el-table-column>
                <el-table-column label="订单生成时间" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.createTime }}
                    </template>
                </el-table-column>
                <el-table-column label="订单关闭时间" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.closeTime }}
                    </template>
                </el-table-column>
                <el-table-column label="消费者第三方标识" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.thirdPartId }}
                    </template>
                </el-table-column>
                <el-table-column label="生成者" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.createBy }}
                    </template>
                </el-table-column>
                <el-table-column label="生成日期" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.createDate }}
                    </template>
                </el-table-column>
                <el-table-column label="更新者" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.updateBy }}
                    </template>
                </el-table-column>
                <el-table-column label="更新日期" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.updateDate }}
                    </template>
                </el-table-column>
                <el-table-column label="备注" width="110">
                    <template slot-scope="scope">
                        {{ scope.row.remark }}
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="created_at" label="操作" width="200">
                    <template slot-scope="scope">
                        <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;"
                            @click="handleEdit(scope.$index, scope.row)">
                            {{ scope.row.isSet ? '保存' : "修改" }}
                        </span>
                        <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;"
                            @click="handleDelete(scope.$index, scope.row)">
                            删除
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="block">
            <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>

        <div class="block">
            <!--弹框-->
            <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible">
                <el-form :model="form">

                    <el-form-item v-if="addForVisible" label="角色Id">
                        <el-input v-model="form.id" auto-complete="off" />
                    </el-form-item>

                    <el-form-item label="主键">
                        <el-input v-model="form.id" placeholder="主键" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="所属组织">
                        <el-input v-model="form.organId" placeholder="所属组织" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="组织路径">
                        <el-input v-model="form.organPath" placeholder="组织路径" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="订单状态">
                        <el-select v-model="form.orderStatus" placeholder="订单状态">
                            <el-option v-for="item in query.orderStatusOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="支付类型">
                        <el-select v-model="form.payType" placeholder="支付类型">
                            <el-option v-for="item in query.orderPayTypeOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="拓展字段">
                        <el-input v-model="form.ext" placeholder="拓展字段" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="订单金额">
                        <el-select v-model="form.amount" placeholder="订单金额">
                            <el-option v-for="item in query.options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单完成时间">
                        <el-date-picker v-model="form.finishedTime" type="date" placeholder="订单完成时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="订单生成时间">
                        <el-date-picker v-model="form.createTime" type="date" placeholder="订单生成时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="订单关闭时间">
                        <el-date-picker v-model="form.closeTime" type="date" placeholder="订单关闭时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="消费者第三方标识">
                        <el-input v-model="form.thirdPartId" placeholder="消费者第三方标识" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="生成者">
                        <el-input v-model="form.createBy" placeholder="生成者" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="生成日期">
                        <el-date-picker v-model="form.createDate" type="date" placeholder="生成日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="更新者">
                        <el-input v-model="form.updateBy" placeholder="更新者" auto-complete="off" />
                    </el-form-item>
                    <el-form-item label="更新日期">
                        <el-date-picker v-model="form.updateDate" type="date" placeholder="更新日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="form.remark" placeholder="备注" auto-complete="off" />
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleEditSave">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</div></template>

<script>
import { getList, doDelete, doEdit } from '@/api/Order/'
import { getDictionaryGroup, getReferencedDictionaryList } from '@/api/dictionary'
import { getOrganId, getOrganPath, handleBuildTreeDataStruct, getSelectedNodes, getSelectedNodesObject } from '@/api/utils'
import { querySubordinateOrgan } from '@/api/Organ'
import SelectTree from '@/components/TreeSelect/index.vue'
export default {
    components: { SelectTree },
    data() {
        return {
            list: null,
            listLoading: true,
            total: 5,
            currentPage: 1,
            pageSize: 10,
            dialogFormVisible: false,
            addForVisible: false,
            form: {
                id: '',
                organId: '',
                organPath: '',
                isDeleted: '',
                orderStatus: '',
                payType: '',
                ext: '',
                amount: '',
                finishedTime: '',
                createTime: '',
                closeTime: '',
                thirdPartId: '',
                createBy: '',
                createDate: '',
                updateBy: '',
                updateDate: '',
                remark: ''
            },
            // 新增or编辑弹框标题(根据点击的新增or编辑按钮显示不同的标题)
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            // 新增和编辑弹框标题
            dialogStatus: '',

            defaultProps: {
                children: 'children',
                label: 'name',
                url: 'url'
            },
            isClearable: true, // 可清空（可选）
            isAccordion: true, // 可收起（可选）
            valueId: null, // 初始ID（可选）
            props: { // 配置项（必选）
                value: 'id',
                label: 'organName',
                children: 'children',
                title: '组织'
                // disabled:true
            },
            optionData: [],
            query: {
                params: {
                    id: '',
                    organId: '',
                    organPath: '',
                    isDeleted: '',
                    orderStatus: '',
                    payType: '',
                    ext: '',
                    amount: '',
                    finishedTime: '',
                    createTime: '',
                    closeTime: '',
                    thirdPartId: '',
                    createBy: '',
                    createDate: '',
                    updateBy: '',
                    updateDate: '',
                    remark: ''
                },
                timeValue: '',
                options: [{
                    value: '1',
                    label: '黄金糕'
                }, {
                    value: '2',
                    label: '双皮奶'
                }],
                orderPayTypeOptions: [],
                orderStatusOptions: [],
                value: ''
            }
        }
    },
    created() {
        this.hadnleBuildOrderPayTypeOptions()
        this.hadnleBuildOrderStatusOptions()
        this.initOrganTree()
        this.fetchData()
    },
    methods: {
        fetchData() {
            this.listLoading = true
            getList(this.query.params, this.currentPage, this.pageSize).then(response => {
                const data = response.data
                this.total = data.totalCount
                this.pageSize = data.pageSize
                this.currentPage = data.currentPage
                this.list = data.entities
                this.listLoading = false
            })
        },
        handleSizeChange(val) {
            this.currentPage = 1
            this.pageSize = val
        },
        handleCurrentChange(val) {
            this.currentPage = val
        },
        // 新增
        handleAdd() {
            // 显示弹框
            this.dialogFormVisible = true
            // 新增弹框标题
            this.dialogStatus = 'add'

            this.form.id = ''
            this.form.organId = ''
            this.form.organPath = ''
            this.form.isDeleted = ''
            this.form.orderStatus = ''
            this.form.payType = ''
            this.form.ext = ''
            this.form.amount = ''
            this.form.finishedTime = ''
            this.form.createTime = ''
            this.form.closeTime = ''
            this.form.thirdPartId = ''
            this.form.createBy = ''
            this.form.createDate = ''
            this.form.updateBy = ''
            this.form.updateDate = ''
            this.form.remark = ''
            this.addForVisible = false
        },
        // 编辑
        handleEdit(index, row) {
            console.log(index)
            console.log(row)
            this.form.id = row.id
            this.form.organId = row.organId
            this.form.organPath = row.organPath
            this.form.isDeleted = row.isDeleted
            this.form.orderStatus = row.orderStatus
            this.form.payType = row.payType
            this.form.ext = row.ext
            this.form.amount = row.amount
            this.form.finishedTime = row.finishedTime
            this.form.createTime = row.createTime
            this.form.closeTime = row.closeTime
            this.form.thirdPartId = row.thirdPartId
            this.form.createBy = row.createBy
            this.form.createDate = row.createDate
            this.form.updateBy = row.updateBy
            this.form.updateDate = row.updateDate
            this.form.remark = row.remark
            this.addForVisible = true
            // 显示弹框
            this.dialogFormVisible = true
            // 编辑弹框标题
            this.dialogStatus = 'edit'
        },
        handleDelete(index, row) {
            console.log(index)
            console.log(row)

            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                doDelete(row.id).then(response => {
                    const data = response.data
                    console.log(data)
                    if (data.status == 1) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        })
                        this.fetchData();
                    } else if (data.status == 403) {
                        this.$message({
                            type: 'warning',
                            message: data.description
                        })
                    } else {
                        this.$message({
                            type: 'info',
                            message: '操作失败!'
                        })
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        handleEditSave() {
            debugger

            doEdit(this.form).then(response => {
                debugger
                console.log(response)
                const data = response.data
                if (data.status) {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    })
                    this.fetchData();
                } else {
                    this.$message({
                        type: 'info',
                        message: '操作失败!'
                    })
                }
                this.listLoading = false
                this.dialogFormVisible = false
            })
        },
        handleReset() {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        hadnleBuildOrderPayTypeOptions() {

            getDictionaryGroup({ sys: 1, bigType: "OrderPayType", organId: getOrganId() }).then(response => {
                const data = response.data
                let orderPayTypeOptions = [];
                for (let i = 0; i < data.length; i++) {

                    let option = {}
                    option['value'] = data[i].value
                    option['label'] = data[i].desc
                    orderPayTypeOptions.push(option)
                }
                this.query.orderPayTypeOptions = orderPayTypeOptions
            })
        },
        hadnleBuildOrderStatusOptions() {

            getDictionaryGroup({ sys: 1, bigType: "OrderStatus", organId: getOrganId() }).then(response => {
                const data = response.data
                let orderStatusOptions = [];
                for (let i = 0; i < data.length; i++) {

                    let option = {}
                    option['value'] = data[i].value
                    option['label'] = data[i].desc
                    orderStatusOptions.push(option)
                }
                this.query.orderStatusOptions = orderStatusOptions
            })
        },
        initOrganTree() {
            this.listLoading = true
            querySubordinateOrgan({ organId: getOrganId() }).then(response => {
                console.log(response)
                const data = response.data
                this.optionData = handleBuildTreeDataStruct(data, 'id', 'parentId')
                this.listLoading = false
            })
        },
        getValue(value) {
            this.valueId = value
            this.query.params.organPath = value.organPath
            console.log(this.valueId)
        }

    }
}
</script>
